import React from 'react';
import ReactDOM from 'react-dom';
import Change from './components/change'
import ShowNum from './components/showNum'
import { Provider, connect } from 'react-redux'
//需要使用 react-redux提供的 Provider把根组件包裹起来 然后 把store传给Provider
// 以后哪个后代组件想要使用redux中的数据  就用react-redux提供的 connect高阶组件处理
import store from './store'
import { changeColor } from './store/actions'

// react-redux 是一个负责链接 react和redux的桥梁
class App extends React.Component {
  change = (e) => {
    console.log(e)
    this.props.changeColor(e.target.value)
  }
  render() {
    return <div className=''>
      <input type="color" onChange={this.change} />
      <ShowNum />
      <Change />
    </div>;
  }
}
App = connect(() => ({}), dispatch => {
  return {
    changeColor(col) {
      dispatch(changeColor(col))
    }
  }
})(App)

ReactDOM.render(<Provider store={store}>
  <App />
</Provider>, document.getElementById('root'))